<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5实战页面</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/animate.css">
</head>
<body>
	<div class="box">
		<!--header-->
		<header class="header">
			<section class="header__wrap">
				<div class="header__logo">H5实战页面</div>
				<nav class="header__nav">
					<a href="javascript:;" class="header__nav__item header__nav__item__status__active">实战课程</a>
					<a href="javascript:;" class="header__nav__item">商业案例</a>
					<a href="javascript:;" class="header__nav__item">课程体系</a>
					<a href="javascript:;" class="header__nav__item">集成环境</a>
					<a href="javascript:;" class="header__nav__item">云端学习</a>
					<a href="javascript:;" class="header__nav__item header__nav__item--study-now" id="study">即刻学习</a>
					<section class="header_nav_tip"></section>
				</nav>
			</section>
		</header>
		<!--screen1-->
		<section class="screen-1" id="study1">
			<section class="screen-1__practice-courses" ></section>
			<section class="container">
				<h2 class="screen-1__heading screen-1__heading_animate_init">实战课程重磅上线</h2>
				<p class="screen-1__heading-descrip screen-1__heading-descrip_animate_init">一键云学习,还在等待什么?</p>
			</section>

		</section>
		<!--screen2-->
		<section class="screen-2">
			<section class="container">
				<h1 class="screen-2__heading">每门课都是真实商业案例</h1>
				<section class="screen-2__sub-heading-tip"></section>
				<p class="screen-2__sub-heading">真实案例,真实场景,在实战中实践、操作、调试<br/>
					大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</p>
				<section class="screen-2__banner">
					<section class="screen-2__banner_i_1"></section>
					<section class="screen-2__banner_i_2"></section>
					<!--screen-2__banner_i_2人物图-->
					<section class="screen-2__banner_i_3"></section>
					<!--screen-2__banner_i_3火箭图-->
				</section>
			</section>
		</section>
		<!--screen3-->
		<section class="screen-3">
			<section class="screen-3__icon"></section>
			<section class="screen-3__content container">
				<section class="screen-3__content__heading">
					<h1>强大的语言课程体系支持</h1>
				</section>
				<section class="screen-3__content__tip"></section>
				<section class="screen-3__content__subheading">
					<p>学习环境与课程轻松对接,安装、调试、写入、部署、运行，一站式解决<br/>，让你体验开发全流程</p>
				</section>
				<section class="screen-3__content__items">
					<span class="screen-3__content__items-1">HTML5</span>
					<span class="screen-3__content__items-2">PHP</span>
					<span class="screen-3__content__items-3">JAVA</span>
					<span class="screen-3__content__items-4">PYTHON</span>
					<span class="screen-3__content__items-5">Node.js</span>
				</section>
			</section>
		</section>
		<!--screen4-->
		<section class="screen-4">
			<section class="screen-4__heading"><h2>省去本地复杂的环境搭建</h2></section>
			<section class="screen-4__tips"></section>
			<section class="screen-4__subheading"><p>你可以告别在虚拟机中调试开发了</p></section>
			<section class="screen-4__items">
				<section class="screen-4__items-wrap1">
					<section class="screen-4__items-1-icon"></section>
					<section class="screen-4__items-title"><p>实战课程集成开发环境</p></section>
				</section>
				<section class="screen-4__items-wrap2">
					<section class="screen-4__items-2-icon"></section>
					<section class="screen-4__items-title"><p>内置终端命令行</p></section>
				</section>
				<section class="screen-4__items-wrap3">
					<section class="screen-4__items-3-icon"></section>
					<section class="screen-4__items-title"><p>编译你的应用程序</p></section>
				</section>
				<section class="screen-4__items-wrap4">
					<section class="screen-4__items-4-icon"></section>
					<section class="screen-4__items-title"><p>通过云端服务输出效果</p></section>
				</section>
			</section>
		</section>
		<!--screen5-->
		<section class="screen-5">
			<section class="screen-5_icon"></section>
			<section class="screen-5_heading">
				<h2>云端学习可以这样简单</h2>
			</section>
			<section class="screen-5_tip">

			</section>
			<section class="screen-5_subheading"><p>看视频、敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</p></section>
		</section>
		<!--others-->
		<section class="screen-others">
				<a  class="screen-others_btn" href="#study1">继续了解学习体验</a>
		</section>
		<!--footer-->
		<section class="footer">
			<nav class="footer_link">
				<a href="#">网站首页</a>
				<a href="#">人才招聘</a>
				<a href="#">联系我们</a>
				<a href="#">高校联盟</a>
				<a href="#">关于我们</a>
				<a href="#">讲师招募</a>
				<a href="#">意见反馈</a>
				<a href="#">友情链接</a>
			</nav>
			<p>Copyright &copy; 2015 imooc.com All Rights Reserved |京ICP备 13046642号-2</p>
		</section>
		<!--outline-->
		<section class="outline">
			<a class="outline__nav" href="javascript:;">实战课程</a>
			<a class="outline__nav" href="javascript:;">商业案例</a>
			<a class="outline__nav" href="javascript:;">课程体现</a>
			<a class="outline__nav" href="javascript:;">集成环境</a>
			<a class="outline__nav" href="javascript:;">云端学习</a>
			<a class="outline__nav" href="#study">即刻学习</a>
		</section>
	</div>

	<script type="text/javascript" src="js/index.js">

	</script>
</body>
</html>